<!--  -->
<template>
    <ContentWrap>
        <div class="flex justify-between">
            <div class="flex aic jcc fontz fonts16 fontw700">
                新都简介
            </div>
        </div>
        <el-form ref="ruleFormRef" :model="state.ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            status-icon style="margin-top:30px;" label-position="top">
            <el-form-item label="新都简介标题" prop="characteristicTitle">
                <el-input v-model="state.ruleForm.characteristicTitle" placeholder="请输入标题" style="width:50%" />
            </el-form-item>
            <el-form-item label="新都简介内容" prop="characteristicContents">
                <!-- <Editor /> -->
                <!-- <div class="" style="width: 50%;">
                    <Editor height="200px" v-model="state.ruleForm.characteristicContents" placeholder="请输入公司简介"/>
                </div> -->
                <el-input v-model="state.ruleForm.characteristicContents" placeholder="请输入内容" :autosize="{ minRows: 2 }"
                    type="textarea" rows="4" style="width: 50%;" />
            </el-form-item>
            <el-form-item label="展示滚动图(大)" prop="ossIds">
                <UpLoadImages v-if="imageBool" :data="state.upLoadImages_" @uploadImageClick="uploadImageClicks_" />
            </el-form-item>
            <!-- <el-form-item label="展示滚动图(小)" prop="ossIds_small">
                <UpLoadImages v-if="imageBool" :data="state.upLoadImages_small"
                    @uploadImageClick="uploadImageClicks_small" />
            </el-form-item> -->
            <el-form-item>
                <div class="flex  w-[100%]">
                    <el-button type="primary" @click="submitForm(ruleFormRef)" style="width: 260px;">保存</el-button>
                    <!-- <el-button @click="resetForm(ruleFormRef)" style="width: 260px;">取消</el-button> -->
                </div>
            </el-form-item>
        </el-form>
    </ContentWrap>
</template>

<script lang="tsx" setup>
import { getTreeLists} from "@/api/column/index"
import { getBaseApi, getBaselistApi, addBaseApi, putBaseApi, addsDeteleBaseApi, addsBaseApi, deteleBaseApi, getDetailApi } from "@/api/setting/index";
import { ElButton, ElInput, ElMessage, ElMessageBox } from 'element-plus'
import { ContentWrap } from '@/components/ContentWrap'
import { ref, reactive, unref, onMounted } from "vue"
import type { FormInstance, FormRules } from 'element-plus'
import UpLoadImages from "@/views/Components/UpLoadImages.vue"
import { useAppStoreWithOut } from '@/store/modules/app'
import { useStorage } from '@/hooks/web/useStorage'
const { getStorage } = useStorage()
const appStore = useAppStoreWithOut()
const userInfo = getStorage(appStore.getUserInfo)
const loadingAdd = ref(false)
const dialogVisible2 = ref(false)
// ---------------------------------------state
const state = reactive({
    baseTitle:"Xindu_detail",
    baseType:"",
    datas: [] as any,
    ruleForm: {
        characteristicItems: [] as any
    } as any,
    ruleForms: {} as any,
    upLoadImages: {
        tip: "注意:最多上传10张，单张图片大小不超过2M，支持jpg、jpeg、png格式",
        urls: [],
        ossIds: "",
        limit: 10,
        actionUrl: "/api/resource/oss/upload",
        headers: {
            "Authorization": `Bearer ${userInfo ? userInfo.access_token : ""}`,
            "clientid": userInfo ? userInfo.client_id : "e5cd7e4891bf95d1d19206ce24a7b32e"
        }
    },
    upLoadImages_: {
        tip: "建议尺寸：1920*750像素最多上传10张，单张图片大小不超过10M，支持jpg、jpeg、png格式",
        urls: [],
        ossIds: "",
        limit: 10,
        size: 10,
        actionUrl: "/api/resource/oss/upload",
        headers: {
            "Authorization": `Bearer ${userInfo ? userInfo.access_token : ""}`,
            "clientid": userInfo ? userInfo.client_id : "e5cd7e4891bf95d1d19206ce24a7b32e"
        }
    },
    upLoadImages_small: {
        tip: "建议尺寸：700*420像素最多上传10张，单张图片大小不超过10M，支持jpg、jpeg、png格式",
        urls: [],
        ossIds: "",
        limit: 10,
        actionUrl: "/api/resource/oss/upload",
        headers: {
            "Authorization": `Bearer ${userInfo ? userInfo.access_token : ""}`,
            "clientid": userInfo ? userInfo.client_id : "e5cd7e4891bf95d1d19206ce24a7b32e"
        }
    },
})
// ---------------------------------------图片上传
// 
const uploadImageClicks_ = (value: any) => {
    state.ruleForm.ossIds = value
    console.log("多图片上传", state.ruleForm.ossIds);
}
const uploadImageClicks_small = (value: any) => {
    state.ruleForm.ossIds_small = value
    console.log("多图片上传", state.ruleForm.ossIds_small);
}
// --------------------------------------------------
interface RuleForm {
    characteristicTitle: string
    characteristicFile: string
    characteristicContents: string
    items: string[]
    linkUrl: string
    ossIds: string
    configurationOssIds: string
    ossIds_small: string
}
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
    characteristicTitle: [
        { required: true, message: '请输入公司名称', trigger: 'blur' },
    ],
    characteristicFile: [
        {
            required: true,
            message: '请上传列表标题图片',
            trigger: 'blur',
        },
    ],
    items: [
        {
            type: "array",
            required: true,
            message: '请添加新都特色',
            trigger: 'change',
        },
    ],
    characteristicContents: [
        {
            required: true,
            message: '请输入内容',
            trigger: 'blur',
        },
    ],
    linkUrl: [
        { required: true, message: '请输入地址链接', trigger: 'blur' },
    ],
    ossIds: [
        {
            required: true,
            message: '请上传展示滚动图(大)',
            trigger: 'blur',
        },
    ],
    ossIds_small: [
        {
            required: true,
            message: '请上传展示滚动图(小)',
            trigger: 'blur',
        },
    ],
    configurationOssIds: [
        {
            required: true,
            message: '请上传新都特色图片',
            trigger: 'blur',
        },
    ],
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            let array = [
                {
                    contentTitle:"公司名称",
                    contentContents:state.ruleForm.characteristicTitle,
                    baseTitle:state.baseTitle,
                    baseType:state.baseType,
                    contentType:"1"
                },
                {
                    contentTitle:"公司简介",
                    contentContents:state.ruleForm.characteristicContents,
                    baseTitle:state.baseTitle,
                    baseType:state.baseType,
                    contentType:"2"
                },
                {
                    contentTitle:"滚动展示图",
                    bigPicOssIds:state.ruleForm.ossIds,
                    baseTitle:state.baseTitle,
                    baseType:state.baseType,
                    contentType:"3"
                }
            ] as any
            addsDeteleBaseApi(array).then((res: any) => {
                ElMessage({
                    type: 'success',
                    message: `${res.msg}`,
                })
                formEl.resetFields()
                getBaseApiApi_()
                loadingAdd.value = false
            }).catch((res: any) => {
                ElMessage({
                    type: 'error',
                    message: `${res.msg}`,
                })
                loadingAdd.value = false
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

// ---------------------------------------api
const imageBool = ref(false)
function urlFun(data) {
    let arrays = [] as any
    data.forEach(element => {
        let obj = {
            response: {
                data: {
                    ossId: element.ossId,
                    url: element.url
                }
            },
            url: element.url
        }
        arrays.push(obj)
    });
    return arrays
}
function urlFuns(data, ids) {
    let array = data
    let arrayIds = ids.split(',')
    let arrays = [] as any
    array.forEach(element => {
        let obj = {
            response: {
                data: {
                    ossId: "",
                    url: element.url
                }
            },
            url: element.url
        }
        arrays.push(obj)
    });
    arrayIds.forEach((element, key) => {
        arrays[key].response.data.ossId = element
    });
    console.log(arrays);
    return arrays


}
onMounted(() => {
    getTreeListApi()
})

const getBaseApiApi_ = async () => {//查询
    getBaseApi({ baseTitle: state.baseTitle }).then((res: any) => {
        console.log(res);
        imageBool.value = true
        if(res.data.length!=0){
            let data=res.data
            state.ruleForm.characteristicTitle=data[0].contentContents
            state.ruleForm.characteristicContents=data[1].contentContents
            state.ruleForm.ossIds=data[2].bigPicOssIds
            state.upLoadImages_.urls=urlFuns(data[2].bigPicFiles,data[2].bigPicOssIds)
        }

    })
}
const getTreeListApi = async()=>{
    let params={}
    getTreeLists(params).then(res=>{
        console.log("详情：",res);
        res.data.forEach(element => {
            traverseTree(element)
        });
        console.log(state.baseType);
        getBaseApiApi_()
    })
}
function traverseTree(node) {
    if(node.data.baseTitle==state.baseTitle){
        state.baseType=node.data.baseType
    }
    if (node.children && node.children.length > 0) {
        for (let child of node.children) {
            traverseTree(child); // 递归遍历子节点  
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 90px;
    height: 90px;
    text-align: center;
}
</style>
<style lang="less" scoped>
.avatar-uploader .avatar {
    width: 90px;
    height: 90px;
    display: block;
}
</style>